<!DOCTYPE html>
<html>
  <head>
    <!-- 标题及搜索关键字 -->

    <link rel="shortcut icon" type="image/x-icon" href="/img/favicon/favicon.ico" />
    <title>gltf模型标绘(含参数编辑) | Mars3D | 三维地图 | 火星科技 | 合肥火星科技有限公司</title>

    <!--第三方lib-->
    <script
      type="text/javascript"
      src="/lib/include-lib.js"
      libpath="/lib/"
      include="jquery,layer,toastr,font-awesome,web-icons,bootstrap,bootstrap-table,bootstrap-checkbox,layer,toastr,haoutil,mars3d,es5-widget,localforage"
    ></script>

    <link href="/css/style.css" rel="stylesheet" />
    <style>
      .infoview div {
        margin-bottom: 5px;
      }
    </style>
  </head>

  <body class="dark">
    <div id="mars3dContainer" class="mars3d-container"></div>

    <div class="infoview">
      <div>
        模型URL：
        <input id="txtModel" type="text" value="//data.mars3d.cn/gltf/mars/feiji.glb" class="form-control" style="width: 350px" />

        <div class="checkbox checkbox-primary checkbox-inline" title="解决跨域问题">
          <input id="chkProxy" class="styled" type="checkbox" />
          <label for="chkProxy"> 代理 </label>
        </div>
        <input type="button" class="btn btn-primary" title="单击后在地图上点选位置即可" value="标绘" onclick="drawModel()" />
      </div>
      <div>
        <div class="checkbox checkbox-primary checkbox-inline" style="margin-left: 10px">
          <input id="chkHasTerrain" class="styled" type="checkbox" checked />
          <label for="chkHasTerrain"> 地形 </label>
        </div>
        <div class="checkbox checkbox-primary checkbox-inline">
          <input id="chkTestTerrain" class="styled" type="checkbox" />
          <label for="chkTestTerrain"> 深度检测 </label>
        </div>
        <div class="checkbox checkbox-primary checkbox-inline" >
          <input id="chk_onlyVertexPosition" class="styled" type="checkbox" />
          <label for="chk_onlyVertexPosition"> 开启顶点吸附 </label>
        </div>

        <input id="btnImpFile" type="button" class="btn btn-primary" value="打开" onclick="saveGeoJSON()" />
        <input id="btnSave" type="button" class="btn btn-primary" value="保存" />
        <input id="input_plot_file" type="file" accept=".json,.geojson" style="display: none" />
        <input type="button" class="btn btn-danger" value="清除" onclick="deleteAll()" />
      </div>
    </div>

    <!-- 切换视角到模型或地形（山区）的快捷按钮 -->
    <script type="text/javascript" src="/js/center_terrain_3dtiles.js"></script>
    <script src="/js/graphic_layer_state.js"></script>

    <script src="/js/common.js"></script>
    <script src="./map.js"></script>
    <script type="text/javascript">
      "use script" //开发环境建议开启严格模式

      let graphicLayer

      function initUI(options) {
        bindAttributePannel()

        let url = haoutil.system.getRequestByName("url")
        if (url) {
          //url传入模型地址
          $("#txtModel").val(url)
        } else {
          //显示历史数据
          localforage.getItem("draw_gltf").then(function (value) {
            if (value) {
              $("#txtModel").val(value)
            }
          })
        }

        let globe = map.scene.globe

        $("#chkHasTerrain").change(function () {
          let isStkTerrain = $(this).is(":checked")
          chkHasTerrain(isStkTerrain)
        })

        $("#chkTestTerrain").change(function () {
          let val = $(this).is(":checked")
          chkTestTerrain(val)
        })

        $("#chk_onlyVertexPosition").change(function () {
          let val = $(this).is(":checked")
          onlyVertexPosition(val)
        })

        // //编辑修改了模型
        // graphicLayer.on(
        //   [mars3d.EventType.editStart, mars3d.EventType.editMovePoint, mars3d.EventType.editStyle, mars3d.EventType.editRemovePoint],
        //   function (e) {
        //     let graphic = e.graphic
        //
        //   }
        // )

        // //停止编辑修改模型
        // graphicLayer.on([mars3d.EventType.editStop, mars3d.EventType.removeGraphic], function (e) {
        //   stopEditing()
        // })

        $("#btnSave").click(function () {
          let strResult = graphicLayer.toGeoJSON()
          if (strResult == null) {
            layer.msg("当前没有标注任何数据，无需保存！")
            return
          }
          haoutil.file.downloadFile("模型标绘.json", JSON.stringify(strResult))
        })

        $("#input_plot_file").change(function (e) {
          let file = this.files[0]
          openGeoJSON(file)
        })

        $("#btnImpFile").click(function () {
          $("#input_plot_file").click()
        })

        graphicLayer.on(mars3d.EventType.drawCreated, function (e) {
          let val = $("#chkHasEdit").is(":checked")
          if (val) {
            showEditor(e)
          }
        })
        // 修改了矢量数据
        graphicLayer.on(
          [mars3d.EventType.editStart, mars3d.EventType.editMovePoint, mars3d.EventType.editStyle, mars3d.EventType.editRemovePoint],
          function (e) {
            let val = $("#chkHasEdit").is(":checked")
            if (val) {
              showEditor(e)
            }
          }
        )

        // 停止编辑
        graphicLayer.on([mars3d.EventType.editStop, mars3d.EventType.removeGraphic], function (e) {
          setTimeout(() => {
            if (!graphicLayer.isEditing) {
              stopEditing()
            }
          }, 100)
        })
      }

      function deleteAll() {
        graphicLayer.clear()
      }

      function drawModel() {
        let url = $("#txtModel").val()
        localforage.setItem("draw_gltf", url)

        let isProxy = $("#chkProxy").is(":checked")
        if (isProxy) {
          url = "//server.mars3d.cn/proxy/" + url
        }
        startDrawModel(url, isProxy)
      }
    </script>
  </body>
</html>
